<app-page-header [pageHeaderInfo]="pageHeaderInfo"></app-page-header>

<div class="normal-table-wrap">
  <div nz-row [nzGutter]="[32,32]">
    <div nz-col [nzXl]="16" [nzXXl]="16" [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXs]="24">
      <app-water-mark></app-water-mark>
      <div nz-row [nzGutter]="[32,32]">
        <div nz-col nzSpan="24">
          <nz-card [nzExtra]="extraTemplate" nzTitle="进行中的项目">
            <div nz-row>
              <div [nzXl]="8" [nzXXl]="8" [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXs]="24" nz-col nz-card-grid *ngFor="let i of 6|numberLoop">
                <nz-card-meta [nzTitle]="cardTitleTpl" nzDescription="城镇中有那么多的酒馆，她却偏偏走进了我的酒馆"></nz-card-meta>
                <div class="card-foot">
                  <span nz-typography nzType="secondary">小华</span>
                  <span nz-typography nzType="secondary">4年前</span>
                </div>
              </div>
            </div>

          </nz-card>
        </div>
        <div nz-col nzSpan="24">
          <nz-card nzTitle="动态">
            <nz-list>
              <nz-list-item style="padding: 16px 24px" *ngFor="let item of 6|numberLoop">
                <nz-list-item-meta>
                  <nz-list-item-meta-avatar [nzSrc]="'assets/imgs/default_face.png'"></nz-list-item-meta-avatar>
                  <nz-list-item-meta-title>
                    <a>曲丽丽 在 <span class="operate-text">高逼格设计天团</span> 新建项目 <span class="operate-text">六月迭代</span></a>
                  </nz-list-item-meta-title>
                  <nz-list-item-meta-description>
                    19 天前
                  </nz-list-item-meta-description>
                </nz-list-item-meta>
              </nz-list-item>
            </nz-list>
          </nz-card>
        </div>
      </div>
    </div>
    <div nz-col [nzXl]="8" [nzXXl]="8" [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXs]="24">
      <app-water-mark></app-water-mark>
      <div nz-row [nzGutter]="[32,32]">
        <div nz-col nzSpan="24">
          <nz-card nzTitle="快速开始/便捷导航">
            <div nz-row [nzGutter]="[16,16]">
              <div *ngFor="let item of 6|numberLoop" nz-col nzSpan="6">
                <a (click)="msg.success('点击了')">操作一</a>
              </div>
              <div nz-col nzSpan="6">
                <button [nzSize]="'small'" nz-button nzGhost nzType="primary"><i nz-icon nzType="plus"></i>
                  <span>添加</span></button>
              </div>

            </div>
          </nz-card>
        </div>
        <div nz-col nzSpan="24">
          <nz-card nzTitle="xx指数">
            <div id="randar"></div>
          </nz-card>
        </div>
        <div nz-col nzSpan="24">
          <nz-card nzTitle="团队">
            <div nz-row>
              <div style="padding: 0 25px" nz-col nzSpan="12" *ngFor="let item of 5|numberLoop">
                <a class="group">
                  <nz-avatar [nzSize]="24"
                             [nzSrc]="'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png'"></nz-avatar>
                  <span class="m-l-10">全组都是吴彦祖</span>
                </a>
              </div>
            </div>
          </nz-card>
        </div>
      </div>
    </div>
  </div>
</div>


<ng-template #pageHeaderContent>
  <div nz-row class="mini-screen">
    <div nz-col nzFlex="1">
      <div nz-row>
        <div nz-col class="m-r-25" nzFlex="72px">
          <img src="../../assets/imgs/default_face.png" alt="">
        </div>
        <div nz-col nzFlex="1">
          <h4 nz-typography class="left-start-center m-0" style="height: 50%">早安，Serati Ma，祝你开心每一天！</h4>
          <div nz-typography nzType="secondary" class="left-start-center" style="height: 50%">交互专家
            |蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED
          </div>
        </div>
      </div>
    </div>
    <div nz-col nzFlex="280px">
      <nz-row>
        <nz-col [nzSpan]="8">
          <nz-statistic [nzValue]="(56 | number)!" [nzTitle]="'项目数'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="8">
          <nz-statistic [nzValue]="'8/24'" [nzTitle]="'团队内排名'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="8">
          <nz-statistic [nzValue]="(2223 | number)!" [nzTitle]="'项目访问'"></nz-statistic>
        </nz-col>
      </nz-row>
    </div>
  </div>
</ng-template>
<ng-template #extraTemplate>
  <a class="operate-text">全部项目</a>
</ng-template>

<ng-template #cardTitleTpl>
  <nz-avatar [nzSize]="24" [nzSrc]="'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png'"></nz-avatar>
  <span class="m-l-10">Angular</span>
</ng-template>
